<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="发放批次" prop="batchNumber">
        <el-input
          v-model="queryParams.batchNumber"
          placeholder="请输入资金发放批次"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="state">
        <el-select
          v-model="queryParams.state"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="dict in budgetStatus"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          size="mini"
          :disabled="multiple"
          @click="handleCheck"
          v-hasPermi="['distribution:approval:add']"
        >
          <svg-icon class="svg" icon-class="examine"/>
          审核
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!-- <div class="selectedDv" v-if="ids.length > 0">已选<span style="color:#1890ff;padding:  0 6px;">{{ ids.length }}</span>项
     </div>-->
    <el-table v-loading="loading" ref="multipleTable" :data="BudgetFundsList" @selection-change="handleSelectionChange">
      <!--      <el-table-column type="selection" width="55" align="center"/>-->
      <el-table-column type="selection" width="55" align="center" :selectable='checkboxT'/>
      <el-table-column label="资金发放批次" align="center" prop="batchNumber"/>
      <el-table-column label="批次金额（元）" align="center" prop="money">
        <template slot-scope="scope">
          {{
            scope.row.money == 0 ? "-" : (String(scope.row.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.money).split('.')[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + (String(scope.row.money).split('.')[1].length < 2 ? String(scope.row.money).split('.')[1] + '0' : String(scope.row.money).split('.')[1]))
          }}
        </template>
      </el-table-column>
      <!--      <el-table-column label="审核时间" align="center" prop="approvalTime"/>-->
      <el-table-column label="付款账号" align="center" prop="by1">
        <template slot-scope="scope">
          <!--          {{ scope.row.by1 ? scope.row.by1.replace(/^(\d{4})\d+(\d{4})$/, "$1******$2") : "" }}-->
          {{
            scope.row.by1 ? scope.row.by1.replace(/\s/g, '').replace(/\D+/g, '').replace(/(\d{4})/g, '$1 ').replace(/\s$/, '') : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="付款名称" align="center" prop="by4"/>
      <el-table-column label="发放数量" align="center" prop="paymentCount"/>
      <!--      <el-table-column label="审核人" align="center" prop="approvalPersonalName"/>-->
      <el-table-column label="审核状态" align="center" prop="by2">
        <template slot-scope="scope">
          <div class="statusDv">
            <div class="statudPoint" :class="'Bg'+scope.row['state']"></div>
            <div v-for="sta in budgetStatus" v-if="sta.dictValue == scope.row['state']">{{ sta.dictLabel }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="本次发放比例（%）" width="150" align="center" prop="ratio">
        <template slot-scope="scope">
          {{ (scope.row.ratio * 100).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="150" align="center" prop="createTime">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleDetails(scope.row)"
          >
            <svg-icon class="svg" icon-class="details"/>
            批次明细
          </el-button>
          <el-button
            v-if="scope.row.state!='1'&&scope.row.state!='0'"
            size="mini"
            type="text"
            @click="handleExamineRecord(scope.row)"
          >
            <svg-icon class="svg" icon-class="details"/>
            审核明细
          </el-button>
          <el-button
            v-if="scope.row.state!='1'"
            size="mini"
            type="text"
            @click="handleOperationLog(scope.row)"
          >            <svg-icon class="svg" icon-class="details"/>
            操作日志
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleQzpz(scope.row)"
          >
            <svg-icon class="svg" icon-class="sign"/>
            附件
          </el-button>
          <!--  <el-button
              size="mini"
              type="text"
              @click="handleQzpz(scope.row)"
            >
              <svg-icon class="svg" icon-class="sign"/>
              签字凭证
            </el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!--    添加-->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body @close="cancelCheck">
      <el-steps :active="activeCheck" finish-status="success" align-center style="margin-bottom: 20px">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" v-if="activeCheck == 1">
        <el-row>
          <el-col :span="12">
            <el-form-item label="本次发放金额" prop="name">
              {{
                this.form.money == 0 ? "-" : String(parseInt(this.form.money)).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
              }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预算总金额" prop="name">
              {{ this.form.ysje == 0 ? "-" : String(parseInt(this.form.ysje)).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="批次号" prop="batchNumber" required>
          <el-input v-model="form.batchNumber" placeholder="请输入批次号" readonly/>
          <el-input v-model="form.money" v-show="1==2" placeholder="请输入批次号" readonly/>
        </el-form-item>
        <el-form-item label="付款账户" prop="by1">
          <el-select
            style="width: 100%"
            v-model="form.by1"
            @change="selectAcc"
            placeholder="请选择付款账户">
            <el-option
              v-for="item in this.frAccList"
              :key="item.frAccNo"
              :label="`${item.frAccNo}-${item.frAccName}`"
              :value="item.frAccNo">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款方名称" prop="by4">
          <el-input v-model="form.by4" placeholder="选择付款账号，自动填充" disabled/>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div v-else>
        <el-form :model="queryBudgetParams" ref="queryBudgetForm" :inline="true" v-show="showSearch">
          <el-form-item label="乡镇" prop="town">
            <el-select
              v-model="queryBudgetParams.town"
              clearable
              placeholder="请选择"
              size="small"
              style="width: 150px"
              @change="selectTown"
            >
              <el-option
                v-for="item in this.townData"
                :key="item.deptCode"
                :label="item.deptName"
                :value="item.deptCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="村11" prop="village">
            <el-select
              v-model="queryBudgetParams.village"
              clearable
              placeholder="请选择"
              size="small"
              style="width: 150px"
              @change="selectVillage"
            >
              <el-option
                v-for="item in this.villageData"
                :key="item.deptCode"
                :label="item.deptName"
                :value="item.deptCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="承包方名称" prop="cbfmc">
            <el-input
              v-model="queryBudgetParams.cbfmc"
              placeholder="请输入承包方名称"
              clearable
              style="width: 150px"
              size="small"
            />
          </el-form-item>
          <!-- <el-form-item label="月份" prop="cbfyf">
             <el-date-picker
               style="width: 146px"
               v-model="queryBudgetParams.month"
               type="month"
               placeholder="请选择月份">
             </el-date-picker>
           </el-form-item>-->
          <el-form-item>
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleBudgetQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetBudgetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loadingAdd" :data="budgetData" ref="multipleTable"
                  @selection-change="handleCreateSelectionChange" :row-key="getRowKey">
          <el-table-column type="selection" width="55" align="center" :reserve-selection="true"/>
          <el-table-column label="承包方" align="center" prop="cbfmc"/>
          <el-table-column label="面积（亩）" align="center" prop="evaluationArea">
            <template slot-scope="scope">
              <span>{{
                  scope.row.evaluationArea / 2
                }}</span>
            </template>
          </el-table-column>
          <el-table-column label="金额（元）" align="center" prop="price"/>
        </el-table>
        <pagination
          v-show="totalbudget>0"
          :total="totalbudget"
          :current-page.sync="queryBudgetParams.pageNum"
          :limit="queryBudgetParams.pageSize"
          :page-sizes="[2, 10, 30, 40]"
          @pagination="getSList"
        />
        <!--          :page-sizes="[10, 30, 40]"-->

        <!--<pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />-->
        <!--        :current-page.sync="queryBudgetParams.pageNum"-->

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCheck">取 消</el-button>
        <el-button type="primary" @click="presCheck" v-if="activeCheck == 1">上一步</el-button>
        <el-button type="primary" @click="nextCheck" v-if="activeCheck == 0">下一步</el-button>
        <el-button type="success" @click="submitForm" v-if="activeCheck == 1">完 成</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改对话框 -->
    <el-dialog title="批次明细" :visible.sync="openYsmx" width="1000px" append-to-body>
      <div style="min-height: 500px">
        <el-table v-loading="loading" :data="detailsList" @selection-change="handleSelectionChange">
          <el-table-column width="220" label="行政区划" align="center" prop="county">
            <template slot-scope="scope">
              {{ scope.row.xjmc }} - {{ scope.row.zjmc }} - {{ scope.row.cjmc }}
            </template>
          </el-table-column>
          <el-table-column width="120" label="收款人" align="center" prop="skrmc"/>
          <el-table-column label="收款账户" width="200" align="center" prop="skrkh"/>
          <el-table-column label="开户行" width="200" align="center" prop="skrkhh"/>
          <el-table-column label="联系电话" width="120" align="center" prop="lxdh"/>
<!--          <el-table-column label="年份" width="120" align="center" prop="yyear"/>-->
          <el-table-column label="本次发放金额（元）" width="150" align="center" prop="money">
            <template slot-scope="scope">
              {{
                scope.row.money == 0 ? "-" : (String(scope.row.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.money).split('.')[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + (String(scope.row.money).split('.')[1].length < 2 ? String(scope.row.money).split('.')[1] + '0' : String(scope.row.money).split('.')[1]))
              }}
            </template>
          </el-table-column>
          <!--          <el-table-column label="流水号" width="180" align="center" prop="orderNumber"/>-->
        </el-table>
      </div>
      <pagination
        v-show="detailstotal>0"
        :total="detailstotal"
        :page.sync="queryDetailsParams.pageNum"
        :limit.sync="queryDetailsParams.pageSize"
        @pagination="getDetails"
      />
    </el-dialog>
    <!--<el-dialog title="批次明细" :visible.sync="openYsmx" width="900px" append-to-body>
      <div style="min-height: 500px">
        <el-table v-loading="loading" :data="detailsList" @selection-change="handleSelectionChange">
          <el-table-column label="合同编码" width="200" align="center" prop="htbm"/>
          <el-table-column label="承包方" align="center" prop="cbfmc"/>
          <el-table-column label="面积（亩）" align="center" prop="evaluationArea">
            <template slot-scope="scope">
              <span>{{
                  scope.row.evaluationArea / 2
                }}</span>
            </template>
          </el-table-column>
          <el-table-column label="金额（元）" align="center" prop="money">
            <template slot-scope="scope">
              {{
                scope.row.money == 0 ? "-" : (String(scope.row.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
              }}
            </template>
          </el-table-column>
          <el-table-column label="收款方" align="center" prop="skrmc"/>
          <el-table-column label="收款账号" align="center" prop="skrkh">
            <template slot-scope="scope">
              {{ scope.row.skrkh ? scope.row.skrkh.replace(/^(\d{4})\d+(\d{4})$/, "$1******$2") : "" }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="detailstotal>0"
        :total="detailstotal"
        :page.sync="queryDetailsParams.pageNum"
        :limit.sync="queryDetailsParams.pageSize"
        @pagination="getDetails"
      />
    </el-dialog>-->
    <el-dialog title="审核记录" :visible.sync="openShjl" width="800px" append-to-body>
      <div style="min-height: 484px">
        <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
          <el-table-column label="审核人" align="center" prop="approvalPersonalName"/>
          <el-table-column label="审核时间" align="center" prop="approvalTime"/>
          <el-table-column label="审核状态" align="center" prop="state">
            <template slot-scope="scope">
              <div class="statusDv">
                <div class="statudPoint" :class="'Bg'+scope.row['state']"></div>
                <div v-for="sta in budgetStatus" v-if="sta.dictValue == scope.row['state']">{{ sta.dictLabel }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="审核意见" align="center" prop="by1"/>
        </el-table>
      </div>
      <pagination
        v-show="recordtotal>0"
        :total="recordtotal"
        :page.sync="querybudgetFundsOutParams.pageNum"
        :limit.sync="querybudgetFundsOutParams.pageSize"
        @pagination="getRecordList"
      />
    </el-dialog>

    <!--    审核-->
    <el-dialog :title="title" :visible.sync="opensp" width="1000px" append-to-body @close="cancelsp">
      <el-steps :active="activeCheck" finish-status="success" align-center style="margin-bottom: 20px">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" v-if="activeCheck == 1">
        <!--<el-row>
          <el-col :span="12">
            <el-form-item label="已签合同金额" prop="number">
              {{ this.yqhtje == 0 ? "-" : String(parseInt(this.yqhtje)).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="新增合同金额" prop="name">
              {{ this.xzhtje == 0 ? "-" : String(parseInt(this.xzhtje)).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row>
          <el-col :span="12">
            <el-form-item label="本次发放金额" prop="name">
              {{
                this.bcffje == 0 ? "-" : (String(this.bcffje).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(this.bcffje).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(this.bcffje).split('.')[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + (String(this.bcffje).split('.')[1].length < 2 ? String(this.bcffje).split('.')[1] + '0' : String(this.bcffje).split('.')[1])) + " 元"
              }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预算总金额" prop="name">
              {{
                this.ysje == 0 ? "-" : (String(this.ysje).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(this.ysje).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(this.ysje).split('.')[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + (String(this.ysje).split('.')[1].length < 2 ? String(this.ysje).split('.')[1] + '0' : String(this.ysje).split('.')[1])) + " 元"
              }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="复审状态" prop="state" required>
          <!-- <el-select
             v-model="form.state"
             clearable
             placeholder="请选择"
             size="small"
             style="width: 100%"
           >
             <el-option
               v-for="dict in approveStatus"
               :key="dict.dictValue"
               :label="dict.dictLabel"
               :value="dict.dictValue">
             </el-option>
           </el-select>-->

          <el-radio-group v-model="form.state">
            <el-radio v-for="item in approveStatus"
                      border
                      size="medium"
                      :label="item.dictValue">
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="复审意见" prop="remark">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入复审意见"/>
        </el-form-item>
      </el-form>
      <div v-else>
        <el-form :model="querypgParams" ref="querypgForm" :inline="true" v-show="showSearch">
          <el-form-item label="县区" prop="city" v-show="cityShow">
            <el-select
              v-model="querypgParams.city"
              clearable
              placeholder="请选择"
              size="small"
              @change="selectCity"
            >
              <el-option
                v-for="item in this.cityData"
                :key="item.deptCode"
                :label="item.deptName"
                :value="item.deptCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="乡镇" prop="town" v-show="townShow">
            <el-select
              v-model="querypgParams.town"
              clearable
              placeholder="请选择"
              size="small"
              @change="selectTown"
            >
              <el-option
                v-for="item in this.townData"
                :key="item.deptCode"
                :label="item.deptName"
                :value="item.deptCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="村" prop="village" v-show="villageShow">
            <el-select
              v-model="querypgParams.village"
              clearable
              placeholder="请选择"
              size="small"
              @change="selectVillage"
            >
              <el-option
                v-for="item in this.villageData"
                :key="item.deptCode"
                :label="item.deptName"
                :value="item.deptCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收款人" prop="skrmc">
            <el-input
              v-model="querypgParams.skrmc"
              placeholder="请输入收款人"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handlePgQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetPgQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="pgList">
          <el-table-column width="220" label="行政区划" align="center" prop="county">
            <template slot-scope="scope">
              {{ scope.row.xjmc }} - {{ scope.row.zjmc }} - {{ scope.row.cjmc }}
            </template>
          </el-table-column>
          <el-table-column width="120" label="收款人" align="center" prop="skrmc"/>
          <el-table-column label="收款账户" width="200" align="center" prop="skrkh"/>
          <el-table-column label="开户行" width="200" align="center" prop="skrkhh"/>
          <el-table-column label="联系电话" width="120" align="center" prop="lxdh"/>
          <el-table-column label="发放金额（元）" width="150" align="center" prop="money">
            <template slot-scope="scope">
              {{
                scope.row.money == 0 ? "-" : (String(scope.row.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,').split('.').length < 2 ? String(scope.row.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ".00" : String(scope.row.money).split('.')[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + (String(scope.row.money).split('.')[1].length < 2 ? String(scope.row.money).split('.')[1] + '0' : String(scope.row.money).split('.')[1]))
              }}
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="pgtotal>0"
          :total="pgtotal"
          :page.sync="querypgParams.pageNum"
          :limit.sync="querypgParams.pageSize"
          @pagination="getPgList"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelsp">取 消</el-button>
        <el-button type="primary" @click="presChecksp" v-if="activeCheck == 1">上一步</el-button>
        <el-button type="primary" @click="nextChecksp" v-if="activeCheck == 0">下一步</el-button>
        <el-button type="success" @click="submitFormsp" v-if="activeCheck == 1">完 成</el-button>
      </div>


      <el-form ref="form" :model="form" :rules="rules" label-width="95px">

      </el-form>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openqzpz" width="700px" append-to-body @close="cancel">
      <el-form ref="form1" label-width="100px">
        <el-form-item label="上传签字凭证" prop="by3">
          <el-upload
            disabled
            class="avatar-uploader"
            list-type="picture-card"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
            multiple
            accept="image/*"
            name="uploadfiles">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="操作日志" :visible.sync="openCzrz" width="1000px" append-to-body @close="cancel">
      <div style="min-height: 484px">
        <el-table v-loading="loading" :data="htczrzList">
          <el-table-column label="操作名称" align="center" prop="operName"/>
          <el-table-column label="操作人" align="center" prop="by1"/>
          <el-table-column label="操作时间" align="center" prop="createTime"/>
        </el-table>
      </div>
      <pagination
        v-show="htczrztotal>0"
        :total="htczrztotal"
        :page.sync="queryczrzParams.pageNum"
        :limit.sync="queryczrzParams.pageSize"
        @pagination="getCzrzList"
      />
    </el-dialog>

    <!--    签字凭证-->
    <el-dialog :title="title" :visible.sync="openqzpz" width="700px" append-to-body @close="cancel">
      <el-form ref="form1" :model="form1" label-width="100px">
        <el-form-item label="上传签字凭证" prop="by3">
          <!--          :before-remove="beforeRemove"-->
          <el-upload
            class="avatar-uploader"
            :action="productFileAction"
            :file-list="fileList"
            list-type="picture-card"
            :before-upload="beforeUpload"
            :headers="headers"
            :on-preview="handlePreview"
            multiple
            disabled
            accept="image/*"
            name="uploadfiles">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input type="textarea" v-show="1==2" v-model="form1.by3" placeholder="请输入附加"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">确 定</el-button>
<!--        <el-button @click="cancel">取 消</el-button>-->
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import {delBudgetFunds, exportBudgetFunds, updateBudgetFunds} from "@/api/zjgl/budgetFunds";
import {
  addBudgetFundsOut,
  approvalOut,
  approvalOutList,
  getdistribution,
  listBudgetFundsOut, operationLog,
  paymentItem,
  paymentList,
  statisMoneyForApprove,
  totalMoney
} from "@/api/zjgl/budgetFundsOut";
import {listAccount} from "@/api/zjgl/account";
import {childlistUse} from "@/api/system/dept";
import {getInfo} from "@/api/login";
import {getCode} from "@/api/htgl/CBHT";
import {getToken} from "@/utils/auth";

export default {
  name: "BudgetFunds",
  data() {
    return {
      EvaluationAccountingList: [],
      CBFList: [],
      dialogVisible: false,
      dialogImageUrl: '',
      field101Action: 'https://jsonplaceholder.typicode.com/posts/',
      field101fileList: [],
      openCheck: false,
      openBudget: false,
      openYsmx: false,
      openShjl: false,
      openCzrz: false,
      htczrzList: [],
      htczrztotal: 0,
      headers: {Authorization: 'Bearer ' + getToken()},
      productFileAction: process.env.VUE_APP_BASE_API + '/system/resource/profile/upload',
      statusOptions: [],
      form1: {},
      budgetStatus: [{
        dictValue: '1',
        dictLabel: '待审核'
      }, {
        dictValue: '2',
        dictLabel: '通过'
      }, {
        dictValue: '3',
        dictLabel: '驳回'
      }],
      approveStatus: [],
      pgList: [],
      recordList: [],
      detailsList: [],
      budgetData: [],
      frAccList: [],
      cityData: [],
      townData: [],
      villageData: [],
      cityShow: '',
      townShow: '',
      villageShow: '',
      bcffje: '',
      xzhtje: '',
      yqhtje: '',
      ysje: '',
      distributionId: '',
      selectedBudgetDataIds: [],
      selectedBudgetDataStringIds: "",
      activeCheck: 0,
      active: 0,
      // 遮罩层
      loading: false,
      loadingAdd: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      detailstotal: 0,
      cbfbms: [],
      totalbudget: 0,
      pgtotal: 0,
      recordtotal: 0,
      // 【请填写功能名称】表格数据222
      BudgetFundsList: [],
      departmentCode: '',
      querypgParams: {
        pageNum: 1,
        pageSize: 10,
        skrmc: null,
        distributeIds: null,
        dkbm: null,
      },
      queryczrzParams: {
        pageNum: 1,
        pageSize: 10,
        distributionIds: null,
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      opensp: false,
      openqzpz: false,
      fileList: [],
      querybudgetFundsOutParams: {
        pageNum: 1,
        pageSize: 10,
        distributionId: null,
        departmentCode: null,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        distributeId: null,
        state: null,
        by2: null,
        name: null,
        year: null,
        sdate: null,
        edate: null,
        budgetpersonid: null,
        budgetperson: null,
        budgetmoney: null,
        submittime: null,
        number: null,
        remarks: null,
        status: null,
        approvedperson: null,
        approveddate: null,
        dkbm: null,
        doneState: null,
        skrmc: null,
      },
      queryBudgetParams: {
        pageNum: 1,
        pageSize: 10,
        distributionIds: [],
        name: null,
        cbfmc: null,
        year: null,
        sdate: null,
        edate: null,
        status: null,
        town: null,
        village: null,
      },
      queryDetailsParams: {
        pageNum: 1,
        pageSize: 10,
        distributeIds: "",
        name: null,
        year: null,
        sdate: null,
        edate: null,
        status: null,
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value1: [],
      value2: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        batchNumber: [
          {required: true, message: "批次号不能为空", trigger: "blur"}
        ],
        by1: [
          {required: true, message: "付款账户不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.getDicts('sys_distribution_item_status').then(response => {
      this.statusOptions = response.data
    })
    /*this.getDicts('sys_budget_status').then(response => {
      this.budgetStatus = response.data
    })*/
    this.getDicts('sys_approve_status').then(response => {
      this.approveStatus = response.data
    })
    this.getList();
  },
  methods: {
    getCzrzList() {
      this.loading = true;
      this.queryczrzParams.distributionIds=this.ids;
      operationLog(this.queryczrzParams).then(response=> {
        this.loading = false;
        this.htczrzList=response.rows;
        this.htczrztotal=response.total;
      });
    },
    handleOperationLog(row) {
      const ids = row.distributeId || this.ids;
      this.ids=row.distributeId;
      this.queryczrzParams.distributionIds=ids;
      this.openCzrz=true;
      operationLog(this.queryczrzParams).then(response=> {
        this.htczrzList=response.rows;
        this.htczrztotal=response.total;
      });
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    pdferr(errurl) {
      console.log(errurl);
    },
    beforeUpload() {
      // this.fileList=[];
      // this.imageList="";
      // this.productVideofileList=[];
      // this.playerOptions['sources'][0]['src'] = '';
    },
    handleQzpz(row) {
      this.reset();
      this.distributeId = row.distributeId;
      if (row.by3 != "" && row.by3 != undefined && row.by3 != null) {
        row.by3.split(',').forEach((item, i) => {
          let name = item.split('/')[item.split('/').length - 1];
          let imageInfo = {name: name, url: item};
          this.fileList.push(imageInfo);
        });
        this.form1.by3 = row.by3;
      }
      this.openqzpz = true;
    },
    selectAcc(val) {

      this.frAccList.map((item) => {
        if (val == item.frAccNo) {
          this.form.by4 = item.frAccName;
        }
      });
    },
    // 选择县
    selectCity(val) {
      this.querypgParams.dkbm = val;
      if (val != "" && val != null) {
        childlistUse(val).then(response => {
          this.townData = response.data;
        });
      }
    },
    // 选择镇
    selectTown(val) {
      this.querypgParams.dkbm = val;
      if (val != "" && val != null) {
        childlistUse(val).then(response => {
          this.villageData = response.data;
        });
      }
    },
    // 选择村
    selectVillage(val) {
      this.querypgParams.dkbm = val;
    },
    checkboxT(row, rowIndex) {
      if (row.state == 2) {
        return false;//禁用
      } else {
        return true;//不禁用
      }
    },
    handleExamineRecord(row) {
      this.openShjl = true;
      this.querybudgetFundsOutParams.distributionId = row.distributeId;
      //获取明细信息
      approvalOutList({
        distributionId: row.distributeId,
        pageNum: this.querybudgetFundsOutParams.pageNum,
        pageSize: this.querybudgetFundsOutParams.pageSize
      }).then(response => {
        this.recordList = response.rows;
        this.recordtotal = response.total;
      });
    },
    getRecordList() {
      approvalOutList({
        budgetId: this.querybudgetFundsOutParams.distributionId,
        pageNum: this.querybudgetFundsOutParams.pageNum,
        pageSize: this.querybudgetFundsOutParams.pageSize
      }).then(response => {
        this.recordList = response.rows;
        this.recordtotal = response.total;
      });
    },
    presChecksp() {
      if (this.activeCheck-- > 2) this.activeCheck = 0;
    },
    nextChecksp() {
      if (this.activeCheck++ > 2) this.activeCheck = 0;
      this.form.state = this.approveStatus[0].dictValue;
      // let distributeIds = this.$refs.multipleTable.selection.map(item => item.distributeId);
      statisMoneyForApprove({distributeIds: this.ids.toString()}).then(response => {
        /*this.xhtje = response.data.xzhtje;
        this.yqhtje = response.data.yqhtje;*/
        this.bcffje = response.data.totalPaymentMoney;
        this.ysje = response.data.totalBudgetMoeny;
      });
    },
    submitFormsp() {
      if (this.form.state == "3" && (this.form.remark == "" || this.form.remark == null || this.form.remark == undefined)) {
        this.$message.warning("审核意见不可为空");
        return false;
      }
      approvalOut({distributionIds: this.ids, state: this.form.state, by1: this.form.remark}).then(response => {
        if (response.code == "200") {
          this.msgSuccess("操作成功");
          this.opensp = false;
          this.form.state = "";
          this.form.remark = "";
          this.activeCheck = 0;
          this.ids = [];
          this.getList();
        } else {
          this.msgError(response.msg);
        }
      });
    },
    // 取消按钮
    cancelsp() {
      this.opensp = false;
      this.form.state = "";
      this.form.remark = "";
      this.activeCheck = 0;
      this.reset();
    },
    childlist(deptCode) {
      childlistUse(deptCode).then(response => {
        this.townData = response.data;
      });
    },
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      // this.queryParams.state="1";
      if (this.queryParams.state == null || this.queryParams.state == undefined || this.queryParams.state == "") {
        this.queryParams.state = "1";
      }
      listBudgetFundsOut(this.queryParams).then(response => {
        this.BudgetFundsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getRowKey: function (row) {
      return row.cbfbm;
    },
    handleSizeChange(v) {
      console.log(v);
    },
    getSList(v) {
      if (v) {
        this.queryBudgetParams.pageNum = v.page;
        this.queryBudgetParams.pageSize = v.limit;
      }
      paymentList({
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        dkbm: this.queryParams.dkbm,
        doneState: this.queryParams.doneState,
        skrmc: this.queryParams.skrmc
      }).then(response => {
        this.loadingAdd = false;
        this.budgetData = response.rows;
        let row = [];
        response.rows.map((item) => {
          if (this.selectedBudgetDataStringIds.indexOf(item.cbfbm) != -1) {
            row.push(item);
            this.$refs.multipleTable.toggleRowSelection(row);
          }
        });
      });

      /*getSubList(this.queryBudgetParams).then(response => {
        this.loadingAdd = false;
        this.budgetData = response.rows;
        let row=[];
        response.rows.map((item)=>{
            if(this.selectedBudgetDataStringIds.indexOf(item.cbfbm) !=-1){
              row.push(item);
              this.$refs.multipleTable.toggleRowSelection(row);
            }
        });

      });*/
    },
    pres() {
      if (this.active-- > 2) this.active = 0;
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    presCheck() {
      if (this.activeCheck-- > 2) this.activeCheck = 0;
    },
    nextCheck() {
      let cbfbms = this.$refs.multipleTable.selection.map(item => item.cbfbm);
      if (cbfbms.length < 1) {
        this.$message.warning("请先选择数据");
      } else {
        this.cbfbms = cbfbms;
        if (this.activeCheck++ > 2) this.activeCheck = 0;
        getCode().then(response => {
          this.form.batchNumber = response.msg;
        });
        listAccount().then(response => {
          this.frAccList = response.rows;
        });

        totalMoney({budgetItemIds: cbfbms}).then(response => {
          this.form.money = response.data.bcffje;
          this.form.ysje = response.data.ysje;
        });
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openqzpz = false;
      this.fileList = [];
      this.imageList = "";
      this.form1.by3 = "";
      this.active = 0
      this.reset();
    },
    cancelCheck() {
      this.open = false;
      this.openCheck = false;
      this.activeCheck = 0
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        distributeId: null,
        batchNumber: null,
        cbfbms: null,
        remark: null,
        by1: null,
        money: null,
        state: null,
        ysje: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handlePgQuery() {
      this.querypgParams.pageNum = 1;
      this.getPgList();
    },
    /** 重置按钮操作 */
    resetPgQuery() {
      this.resetForm("querypgForm");
      this.querypgParams.dkbm = "";
      this.querypgParams.skrmc = "";
      this.handlePgQuery();
    },
    handleBudgetQuery() {
      this.queryParams.pageNum = 1;
      this.getSList();
    },
    resetBudgetQuery() {
      this.resetForm("queryBudgetForm");
      this.handleBudgetQuery();
    },
    //1231
    handleCreateSelectionChange(selection) {
      this.selectedBudgetDataIds = selection.map(item => item.cbfbm)
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.distributeId);
      this.queryBudgetParams.distributionIds = this.ids;
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增";
      // 获取明细
      this.loadingAdd = true;
      this.queryBudgetParams.distributionIds = [];
      this.getSList();
      getInfo().then(response => {
        let deptCode = response.user.dept.deptCode;
        if (deptCode.length == 4) {//新区
          this.cityShow = true;
          this.townShow = true;
          this.villageShow = true;
          childlistUse(deptCode).then(response => {
            this.cityData = response.data;
          });
        } else if (deptCode.length == 6) {//县
          this.cityShow = false;
          this.townShow = true;
          this.villageShow = true;
          childlistUse(deptCode).then(response => {
            this.townData = response.data;
          });
        } else if (deptCode.length == 9) {//镇
          this.cityShow = false;
          this.townShow = false;
          this.villageShow = true;
          childlistUse(deptCode).then(response => {
            this.villageData = response.data;
          });
        } else {
          this.childlist(1306);
          this.cityShow = true;
          this.townShow = true;
          this.villageShow = true;
        }
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.open = true
      this.title = "修改";
      this.reset();
      const id = row.distributeId || this.ids
      // 获取明细
      this.loadingAdd = true;
      this.queryBudgetParams.distributionIds = [];
      this.queryBudgetParams.distributionId = id;
      getdistribution({distributeId: id}).then(response => {
        this.selectedBudgetDataStringIds = response.data.by5;
        /*this.msgSuccess("修改成功");
        this.open = false;
        this.getList();*/
        this.getSList();

      });
      getInfo().then(response => {
        let deptCode = response.user.dept.deptCode;
        if (deptCode.length == 4) {//新区
          this.cityShow = true;
          this.townShow = true;
          this.villageShow = true;
          childlistUse(deptCode).then(response => {
            this.cityData = response.data;
          });
        } else if (deptCode.length == 6) {//县
          this.cityShow = false;
          this.townShow = true;
          this.villageShow = true;
          childlistUse(deptCode).then(response => {
            this.townData = response.data;
          });
        } else if (deptCode.length == 9) {//镇
          this.cityShow = false;
          this.townShow = false;
          this.villageShow = true;
          childlistUse(deptCode).then(response => {
            this.villageData = response.data;
          });
        } else {
          this.childlist(1306);
          this.cityShow = true;
          this.townShow = true;
          this.villageShow = true;
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$confirm('是否提交至审核人员审核?', '提示', {
            cancelButtonClass: 'btn-custom-cancel',
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning'
          }).then(() => {
            this.form.state = "1";
            if (this.form.distributeId != null) {
              updateBudgetFunds(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              this.form.cbfbms = this.cbfbms;
              addBudgetFundsOut(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }).catch(() => {
            this.form.state = "0";
            if (this.form.distributeId != null) {
              updateBudgetFunds(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              this.form.cbfbms = this.cbfbms;
              addBudgetFundsOut(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          });


          /*if (this.form.distributeId != null) {
            updateBudgetFunds(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.form.cbfbms = this.cbfbms;
            addBudgetFundsOut(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }*/
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.openShjl = true
      const ids = row.distributeId || this.ids;
      this.$confirm('是否确认删除数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delBudgetFunds(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },
    handleCheck() {
      this.opensp = true;
      this.title = "审核";
      this.reset();
      let distributeIds = this.$refs.multipleTable.selection.map(item => item.distributeId);
      this.queryDetailsParams.distributeIds = distributeIds.toString();
      this.querypgParams.distributeIds = distributeIds.toString();
      getInfo().then(response => {
        let deptCode = response.user.dept.deptCode;
        if (deptCode.length == 4) {//新区
          this.cityShow = true;
          this.townShow = true;
          this.villageShow = true;
          childlistUse(deptCode).then(response => {
            this.cityData = response.data;
          });
        } else if (deptCode.length == 6) {//县
          this.cityShow = false;
          this.townShow = true;
          this.villageShow = true;
          childlistUse(deptCode).then(response => {
            this.townData = response.data;
          });
        } else if (deptCode.length == 9) {//镇
          this.cityShow = false;
          this.townShow = false;
          this.villageShow = true;
          childlistUse(deptCode).then(response => {
            this.villageData = response.data;
          });
        } else {
          this.childlist(1306);
          this.cityShow = true;
          this.townShow = true;
          this.villageShow = true;
        }
      });

      this.getPgList();
      /*this.queryDetailsParams.distributionId = row.distributeId;
      approvalMoneyOut({distributionIds: this.ids}).then(response => {
        this.xhtje = response.data.xzhtje;
        this.yqhtje = response.data.yqhtje;
        this.bcffje = response.data.bcffje;
        this.ysje = response.data.ysje;
      });*/
    },
    handleDetails(row) {
      /*this.queryDetailsParams.distributionId = row.distributeId;
      this.openYsmx = true;
      this.title = "批次明细";
      this.getDetails();*/
      this.queryDetailsParams.distributeIds = row.distributeId;
      this.openYsmx = true;
      this.title = "批次明细";
      this.getDetails();
    },
    getDetails() {
      /*mxListOut(this.queryDetailsParams).then(response => {
        this.detailsList = response.rows;
        this.detailstotal = response.total;
        this.loading = false;
      });*/
      paymentItem(this.queryDetailsParams).then(response => {

        this.detailsList = response.rows;
        this.detailstotal = response.total;
        this.loading = false;
      });
    },
    getPgList() {
      paymentItem(this.querypgParams).then(response => {

        this.pgList = response.rows;
        this.pgtotal = response.total;
        this.loading = false;
      });
      /*subApprovalOutList({
        distributionIds: this.queryBudgetParams.distributionIds,
        cbfmc: this.querypgParams.cbfmc,
        departmentCode: this.querypgParams.departmentCode
      }, this.queryBudgetParams.pageNum, this.queryBudgetParams.pageSize).then(response => {
        this.pgList = response.rows;
        this.pgtotal = response.total;
        this.loading = false;
      });*/
    },
    handleBudgetOut() {
      this.$confirm('是否确认发放?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        this.$message.warning("银行接口还未开通")
      }).then(response => {
        this.$message.warning("银行接口还未开通")
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有【请填写功能名称】数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportBudgetFunds(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    }
  }
};
</script>
<style>
.btn-custom-cancel {
  float: right;
  margin-left: 10px;
}

.selectedDv {
  background-color: rgba(230, 247, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(186, 231, 255, 1);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}

.statusDv {
  display: flex;
  justify-content: center;
  align-items: center;
}

.statudPoint {
  border-radius: 50px;
  width: 6px;
  height: 6px;
  margin-right: 6px;
}

/*审核通过背景色*/
.Bg2 {
  background-color: #13ce66;
}

/*未提交*/
.Bg0 {
  background-color: #1890ff;
}

/*待审核*/
.Bg1 {
  background-color: orange;
}

/*审核失败*/
.Bg3 {
  background-color: red;
}

.myTitle {
  margin: 10px 0;
  color: #1890FF;
  font-size: 16px;
}
</style>
